<template>
    <div class="flex">
        <pagination :length="total" :pagination="pagination" float="right" @currpage="getfindData"></pagination>
        <el-table
            ref="table"
            :data="tableData"
            border
            v-loading="loading"
            :header-cell-style="getRowClass"
        >
            <el-table-column prop="countryName" :label="$t('m.label.country')" width="90"></el-table-column>
            <el-table-column
                prop="productModelNumber"
                :label="$t('m.label.productModelNumber')"
                width="100"
            >
                <template slot-scope="scope">
                    <el-link
                        :href="'#/productCenter/productBasicInfo?model='+ scope.row.productModelNumber"
                    >{{scope.row.productModelNumber}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="reviewerName" :label="$t('m.label.reviewerName')" width="140"></el-table-column>
            <el-table-column prop="starRate" :label="$t('m.label.reviewerFraction')" width="80">
                <template slot-scope="scope">
                    <div style="text-align: center;">{{scope.row.starRate}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="reviewDate" :label="$t('m.label.reviewDate')" width="100">
                <template slot-scope="scope">{{scope.row.reviewDate.slice(0 ,10)}}</template>
            </el-table-column>
            <el-table-column prop="content" :label="$t('m.label.reviewContent')" width="600">
                <template slot-scope="scope">
                    <div style="font-size: 16px;line-height: 18px; font-weight: bold;color:#333">
                        {{scope.row.reviewTitle}}
                        <el-rate
                            v-model="scope.row.starRate"
                            disabled
                            style="    display: inline-block;vertical-align: top;"
                        ></el-rate>
                    </div>
                    <div style="font-size: 12px;line-height: 16px;">{{scope.row.content}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="reviewUrl" :label="$t('m.label.reviewUrl')" width="150">
                <template slot-scope="scope">
                    <el-link
                        type="primary"
                        :href="'http://'+scope.row.reviewUrl"
                        target="view_window"
                        :title="scope.row.reviewUrl"
                    >{{scope.row.reviewUrl.slice(0 ,14)}}...</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="reviewerUrl" :label="$t('m.label.reviewerUrl')" width="150">
                <template slot-scope="scope">
                    <el-link
                        type="primary"
                        :href="'http://'+scope.row.reviewerUrl"
                        target="view_window"
                        :title="scope.row.reviewerUrl"
                    >{{scope.row.reviewerUrl.slice(0 ,14)}}...</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="amzOrderId" :label="$t('m.label.orderNumber')" width="210">
                <template slot-scope="scope">
                    <div
                        v-if="!scope.row.edit"
                        @click="editItem(scope.row)"
                        v-html="scope.row.amzOrderId"
                        class="amzOrderId"
                    >
                        {{scope.row.amzOrderId}}
                        <i class="el-icon-arrow-down"></i>
                    </div>
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 1, maxRows: 3}"
                        :placeholder="$t('m.label.pleaseEnteContent')"
                        v-if="scope.row.edit"
                        v-model="scope.row.amzOrderId"
                        size="mini"
                        :autofocus="scope.row.edit"
                        @blur="editItem(scope.row)"
                    ></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="record" :label="$t('m.label.evaluation_follow')" width="100">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p v-for="(item,index) in scope.row.recordArr" :key="index">{{item}}</p>
                        <div slot="reference" class="name-wrapper">{{ scope.row.record }}</div>
                    </el-popover>
                    <el-button
                        type="primary"
                        size="mini"
                        @click="showRecord(scope.row)"
                    >{{$t('m.button.addTo')}}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="chargeMan" :label="$t('m.label.principal')" width="120">
                <template slot-scope="scope">
                    <span v-if="!scope.row.edit" @click="editItem(scope.row)">
                        {{scope.row.chargeMan}}
                        <i class="el-icon-arrow-down"></i>
                    </span>
                    <el-input
                        v-if="scope.row.edit"
                        v-model="scope.row.chargeMan"
                        size="mini"
                        :autofocus="scope.row.edit"
                        @blur="editItem(scope.row)"
                    ></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="reviewImages" :label="$t('m.label.reviewImages')" width="125">
                <template slot-scope="scope">
                    <el-image
                        style="width: 50px; height: 50px"
                        :src="item"
                        fit="fill"
                        v-for="(item,index) in scope.row.reviewImages"
                        :key="index"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column fixed="right" :label="$t('m.label.operating')" width="175">
                <template slot-scope="scope">
                    <el-button
                        type="danger"
                        size="mini"
                        @click="showSaveRefund(scope.row)"
                    >{{$t('m.button.reimburse')}}</el-button>
                    <el-button
                        :type="scope.row.handleStatus !== 1?'':'primary'"
                        size="mini"
                        @click="handleStatus(scope.row)"
                    >{{scope.row.handleStatus !== 1?$t('m.button.completed'):$t('m.button.pending')}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="overflow: auto;margin-top: 10px;">
            <pagination
                :length="total"
                :pagination="pagination"
                float="right"
                @currpage="getfindData"
            ></pagination>
        </div>
        <scrollTable ref="scrollTable"></scrollTable>
        <record ref="record" :itemRecord="item" @getRecord="update(item)"></record>
        <saveRefund ref="saveRefund" :itemSaveRefund="item"></saveRefund>
    </div>
</template>
<script>
const ERR_OK = 200;
import pagination from "components/pagination/pagination.vue";
import { getTable } from "./http";
import scrollTable from "components/scroll/scroll-table.vue";
export default {
    props: {
        formData: {}
    },
    data() {
        return {
            tableData: [],
            pagination: {
                pagesize: 20,
                currpage: 1
            },
            total: 0,
            item: {},
            loading: true,
            URL: ""
        };
    },
    created() {
        // this.getfindData();
    },
    mounted() {
        this.$emit("columns", this.$refs.table.columns);
    },
    methods: {
        getfindData() {
            this.tableData = [];
            this.loading = true;
            this.formData.pageNumber = this.pagination.currpage;
            this.formData.pageSize = this.pagination.pagesize;
            getTable(this.formData).then(res => {
                if (res.data.code === ERR_OK) {
                    let tableData = res.data.data.data;
                    if (tableData !== "没有数据") {
                        for (let i in tableData) {
                            tableData[i].edit = false;
                            tableData[i].id = i;
                            if (tableData[i].record) {
                                tableData[i].recordArr = tableData[
                                    i
                                ].record.split(/[/<br \/>/g]+/);
                            }
                        }
                        this.tableData = tableData.sort(
                            (a, b) =>
                                new Date(b.reviewDate).getTime() -
                                new Date(a.reviewDate).getTime()
                        );
                        this.total = res.data.data.total;
                    } else {
                        this.tableData = [];
                        this.total = 0;
                    }
                    this.loading = false;
                    this.$refs.scrollTable.scrollShow(this.$refs.table);
                }
            });
        },
        // 编辑
        editItem(item) {
            item.edit = item.edit ? false : true;
            this.item = JSON.parse(JSON.stringify(item));
            if (item.edit === false) {
                this.update(item);
            }
        },
        // 更新列表数据Item
        update(item) {
            this.$ajax({
                method: "post",
                url: this.GLOBAL.reviewMonitoringService + "/tracking/update",
                data: {
                    amzOrderId: item.amzOrderId,
                    asinId: item.asinId,
                    chargeMan: item.chargeMan,
                    handleStatus: item.handleStatus,
                    record: item.record,
                    recordDate: item.recordDate,
                    reviewId: item.reviewId
                }
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.$message.success("编辑成功");
                    this.upitem();
                    this.$emit("findChargeMan");
                } else {
                    this.$message.error("编辑失败");
                }
            });
        },
        upitem() {
            for (let i in this.tableData) {
                if (this.tableData[i].id === this.item.id) {
                    for (let e in this.item) {
                        this.tableData[i][e] = this.item[e];
                    }
                    if (this.tableData[i].recordArr) {
                        this.tableData[i].recordArr = this.item.record.split(
                            /[/<br \/>/g]+/
                        );
                    }
                    return;
                }
            }
        },
        // 显示添加记录
        showRecord(item) {
            this.item = JSON.parse(JSON.stringify(item));
            this.$refs.record._show();
        },
        // 标题背景颜色
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "background: #EBEEF5 ";
            } else {
                return "";
            }
        },
        //显示创建退款
        showSaveRefund(item) {
            this.item = JSON.parse(JSON.stringify(item));
            this.$refs.saveRefund._show();
        },
        // 处理完成
        handleStatus(item) {
            if (item.handleStatus === 1) {
                this.$confirm("是否要确定已完成", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    item.handleStatus = 2;
                    this.item = JSON.parse(JSON.stringify(item));
                    this.update(item);
                    this.$message({
                        type: "success",
                        message: "删除成功!"
                    });
                });
            }
        }
    },
    watch: {
        formData() {
            this.pagination.currpage = 1;
            this.total = 0;
            this.getfindData();
        }
    },
    components: {
        pagination,
        scrollTable,
        record: resolve => require(["./record.vue"], resolve),
        saveRefund: resolve => require(["./saveRefund.vue"], resolve)
    }
};
</script>
<style lang="stylus" scoped>
.name-wrapper {
    max-width: 65px;
    line-height: 26px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
}

.button-wrapper {
    display: inline-block;
}

.amzOrderId {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
</style>
